<template>
  <el-dialog :visible.sync="visible" custom-class="invite-user-dialog" :before-close="closeHandler">
    <div slot="title">
      <div class="dialog-title big_title">
        邀请成员
      </div>
    </div>
    <div>
      <el-row class="pt20 height60">
        <el-col :span="8"> <el-radio :label="3" v-model="roleId"  class="font16 strongcolor">管理员</el-radio> </el-col>
        <el-col :span="16" class="text-right"> <div class="inlineBlock lightcolor">创建团队 | 添加成员 | 创建页面 | 预览页面 | 预览页面 | 预览页面</div> </el-col>
      </el-row>

      <el-row class="pt20 height60">
        <el-col :span="8"> <el-radio :label="6" v-model="roleId"  class="font16 strongcolor">设计师</el-radio> </el-col>
        <el-col :span="16" class="text-right"> <div class="inlineBlock lightcolor">创建团队 | 添加成员 | 创建页面 | 预览页面 | 预览页面 | 预览页面 | 创建团队 | 添加成员 | 创建页面 | 预览页面 | 预览页面 | 预览页面</div> </el-col>
      </el-row>

      <el-row class="pt20 height60">
        <el-col :span="8"> <el-radio :label="9" v-model="roleId"  class="font16 strongcolor">预览者</el-radio> </el-col>
        <el-col :span="16" class="text-right"> <div class="inlineBlock lightcolor">创建团队 | 添加成员 | 创建页面 | 预览页面 | 预览页面 | 预览页面</div> </el-col>
      </el-row>
    </div>
    <div class="pt40">
      <el-button type="primary">生产链接</el-button>
    </div>
    <el-divider><span class="lightcolor">或</span></el-divider>
    <el-button type="text">通过邮件或手机号码邀请</el-button>
  </el-dialog>
</template>

<script>
export default {
  name: 'InviteUserDialog',
  props: {
    value: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      roleId: 3
    }
  },
  computed: {
    visible: {
      get () {
        return this.value
      },
      set (val) {
        this.$emit('input', val)
      }
    }
  },
  methods: {
    closeHandler (done) {
      done()
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
